<template>
  <div>
    <div style="color: darkorange;font-size:small;height:30px">
      <el-button circle icon="el-icon-back" style="margin-right: 20px"
                 type="warning" @click="toShop()"></el-button>
      <el-input v-model="coachNo" class="input" placeholder="车厢" style="width:150px"></el-input>
      &nbsp;&nbsp;&nbsp;
      <el-input v-model="seatNo" class="input" placeholder="座位号" style="width:150px"></el-input>
      &nbsp;&nbsp;&nbsp;
      <el-input v-model="ticId" class="input" placeholder="车票编号" style="width:150px"></el-input>
      &nbsp;&nbsp;&nbsp;
      <el-button class="botton" @click="loadTic()">搜索</el-button>&nbsp;
      <el-button class="botton" @click="multipleBuyTic()">批量购买</el-button>
    </div>
    <div style="margin-top:8px;margin-bottom:15px;"></div>
    <div class="big">
      <el-table :data="tableData" :row-style="{ color: 'darkorange', height: '60px' }" border style="width: 100%"
                @selection-change="HandleSelectChange">
        <el-table-column type="selection">
        </el-table-column>
        <el-table-column label="车厢" prop="coachNo">
        </el-table-column>
        <el-table-column label="座位号" prop="seatNo">
        </el-table-column>
        <el-table-column label="列车编号" prop="train.trainId">
        </el-table-column>
        <el-table-column label="车票编号" prop="ticketId">
        </el-table-column>
        <el-table-column fixed="right" style="border: 1px solid darkorange;" width="60px">
          <template slot-scope="scope">
            <div class="edit_delete">
              <el-button circle icon="el-icon-shopping-cart-2" type="warning"
                         @click="buyTic(scope.row.ticketId)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;text-align:center">
      <el-pagination :current-page="page" :total="total" background
                     class="white-list-tool" layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ['headerId'],
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      ticId: '',
      trainId: '',
      coachNo: '',
      seatNo: '',
      centerDialogVisible: false,
      mutipleSelection: [],
    }
  },
  methods: {
    toShop() {
      this.$router.push({path: '/users/shop'})
    },
    async buyTic(id) {
      await this.$http.get("/ticSale", {
        params: {
          ticketId: id,
          userId: this.headerId
        }
      })
      this.$message("购票成功")
      this.loadTic()
    },
    async multipleBuyTic() {
      var id = this.mutipleSelection.map(v => v.ticketId);
      for (var i = 0; i < id.length; i++) {
        await this.$http.get("/ticSale", {
          params: {
            ticketId: id[i],
            userId: this.headerId
          }
        })
      }
      this.loadTic()
    },
    HandleSelectChange(val) {
      this.mutipleSelection = val
    },
    loadTic() {
      this.$http.get("/selectAllTic", {
        params: {
          ticketId: this.ticId,
          trainId: this.trainId,
          coachNo: this.coachNo,
          seatNo: this.seatNo,
          sold: 0,
          page: this.page,
        }
      }).then((response) => {
        this.tableData = response.data
      })
      this.$http.get("/getTicRowCount", {
        params: {
          ticketId: this.ticId,
          trainId: this.trainId,
          coachNo: this.coachNo,
          seatNo: this.seatNo,
          sold: 0
        }
      }).then((response) => {
        this.total = response.data
      })
      console.log(this.tableData)
    },
    handleCurrentChange(page) {
      this.page = page
      this.loadTic()
    },
  },
  created() {
    this.trainId = this.$route.query.trainId
    this.loadTic()
    this.userId = this.$route.query.userId
  },
}
</script>

<style scoped>
::v-deep .el-dialog {
  height: 33%;
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  margin: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;

}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>